<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>生命周期中最重要的两个函数</title>
</head>
<body>
<div id="app">
  <h1 :style="{opacity}">欢迎学习vue</h1>
  <button @click="bye">销毁vue</button>
</div>

<script src="../js/vue.js"></script>
<script type="text/javascript">
  const vm=new Vue({
    el:"#app",
    data(){
      return{
        opacity:1
      }
    },
    methods:{
        bye(){
          this.$destroy()
        }
    },
    //启动一个定时器
    mounted(){
      this.timeID=setInterval(()=>{
        this.opacity-=0.1
        if (this.opacity<=0)this.opacity=1
        console.log("setInterval")
      },1000)
    },
    //销毁之前的操作
    beforeDestroy() {
      clearInterval(this.timeID)
      console.log("在vue销毁之前关闭定时器")
    }
  })
</script>
</body>
</html>
